import { useState } from "react";
// 兄弟组件通信 A->B
// 1.通过子传父 A->App
// 2.通过父传子 App->B

function A({ onSetName }) {
  const name = "this is A name";
  return (
    <>
      <div>this is A component</div>
      <button onClick={() => onSetName(name)}>send name to B</button>
    </>
  );
}

function B({ name }) {
  return (
    <>
      <div>this is B component</div>
      <div>A组件传递的数据: {name}</div>
    </>
  );
}

function App() {
  // 使用状态变量管理数据，当数据发生变化时会重新渲染模板
  const [name, setName] = useState("");
  // 获取A组件传递的数据
  const getName = (val) => {
    setName(val);
  };
  return (
    <>
      this is App component
      <A onSetName={getName}></A>
      <B name={name}></B>
    </>
  );
}

export default App;
